import { Button, List, Space, Typography } from "antd";
import { useEffect, useState } from "react";
import styles from "./History.module.css";
import {
  cleanHistory,
  getHistory,
} from "../../../../utils/utils/history/history";
import React from "react";
import GoBackHeader from "../../../../components/GoBackHeader";

export default () => {
  const [data, setData] = useState<string[]>([]);
  useEffect(() => {
    setData(getHistory());
  }, []);
  return (
    <>
      <GoBackHeader />
      <div className={styles.box}>
        <Space>
          <Button className={styles.gap} type="primary">
            add
          </Button>
          <Button
            className={styles.gap}
            onClick={() => {
              cleanHistory();
              setData(getHistory());
            }}
          >
            clean
          </Button>
        </Space>
        <List
          bordered
          dataSource={data}
          renderItem={(item: string) => (
            <List.Item>
              <Typography.Text mark>[HISTORY]</Typography.Text> {item}
            </List.Item>
          )}
        />
      </div>
    </>
  );
};